<template>
  <div class="lofi-card hover:bg-lofi-beige transition-colors cursor-pointer">
    <div class="flex justify-between items-start mb-2">
      <span class="text-sm font-bold">{{ title }}</span>
      <span class="text-xs text-lofi-brown">{{ date }}</span>
    </div>
    <div class="h-24 bg-lofi-beige rounded mb-2 flex items-center justify-center">
      <i :class="'fa ' + icon + ' text-4xl text-lofi-brown/50'"></i>
    </div>
    <div class="flex justify-between text-xs">
      <span>{{ type }}</span>
      <div>
        <i class="fa fa-pencil text-lofi-brown hover:text-lofi-accent mr-2"></i>
        <i class="fa fa-trash-o text-lofi-brown hover:text-lofi-accent"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  type: {
    type: String,
    required: true
  },
  date: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  }
})
</script>